'use client';

import React from 'react';
import { Button } from 'antd';
import { WechatOutlined } from '@ant-design/icons';
import { useAuth } from '../../components/AuthProvider';
import { useMessage } from '@/hooks/useMessage';

interface TempUserInfo {
  openid: string;
  nickname: string;
  avatar: string;
}

interface WechatLoginCardProps {
  onFirstTimeLogin: (userInfo: TempUserInfo) => void;
}

const WechatLoginCard: React.FC<WechatLoginCardProps> = ({ onFirstTimeLogin }) => {
  const { wechatLogin } = useAuth();
  const message = useMessage();

  // 模拟微信登录扫码后的回调
  const handleWechatScan = async () => {
    try {
      const mockOpenid = `wx_${Date.now()}`;
      const response = await wechatLogin(mockOpenid);
      
      if (response.isFirstLogin && response.tempUserInfo) {
        // 首次登录，需要绑定手机号
        onFirstTimeLogin(response.tempUserInfo);
      } else {
        // 非首次登录，已经在 AuthProvider 中处理了登录成功
        message.success('微信登录成功');
      }
    } catch (error) {
      console.error('微信登录失败:', error);
      message.error('微信登录失败，请重试');
    }
  };

  return (
    <div className="w-full space-y-6">
      {/* 微信登录二维码区域 */}
      <div className="text-center">
        <div 
          className="w-48 h-48 mx-auto border-2 border-dashed border-gray-200 rounded-xl flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 cursor-pointer hover:border-teal-300 hover:bg-gradient-to-br hover:from-teal-50 hover:to-cyan-50 transition-all duration-300 group"
          onClick={handleWechatScan}
        >
          <div className="text-center">
            <div className="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-xl mx-auto mb-3 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
              <WechatOutlined className="text-2xl text-white" />
            </div>
            <p className="text-gray-600 text-sm font-medium">点击模拟扫码登录</p>
            <p className="text-gray-400 text-xs mt-1">或使用微信扫描二维码</p>
          </div>
        </div>
      </div>

      {/* 登录说明 */}
      <div className="text-center space-y-3">
        <p className="text-gray-600 text-sm">
          推荐使用微信登录，安全便捷
        </p>
        
        {/* 快速登录按钮 */}
        <Button
          type="primary"
          size="large"
          icon={<WechatOutlined />}
          onClick={handleWechatScan}
          className="w-full bg-gradient-to-r from-green-500 to-green-600 border-0 hover:from-green-600 hover:to-green-700 shadow-lg hover:shadow-xl transition-all duration-300"
        >
          微信一键登录
        </Button>
      </div>

      {/* 功能特点 */}
      <div className="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg p-4 border border-teal-100">
        <div className="flex items-start space-x-3">
          <div className="w-6 h-6 bg-teal-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
            <span className="text-white text-xs">✓</span>
          </div>
          <div className="text-sm">
            <p className="text-teal-800 font-medium mb-1">微信登录优势</p>
            <ul className="text-teal-600 space-y-1 text-xs">
              <li>• 无需记忆密码，扫码即可登录</li>
              <li>• 与小程序账号互通，数据同步</li>
              <li>• 安全可靠，保护个人隐私</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WechatLoginCard; 